<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="./css/bootstrap.min.css">
	<link rel="stylesheet" href="./css/zhuye.css">
	<title>网易云音乐</title>
	<script src="./js/jquery-3.5.1.slim.min.js"></script>
	<script src="./js/popper.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>
	<style></style>
</head>

<body>
	<!-- 导航栏 -->

	<nav class="navbar navbar-expand-sm  navbar-dark  bg-dark">
		<div class="container-sm">
			<a href="#" class="navbar-brand"><img src="./images/th.jpg" class="loog">网易云音乐</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#a1"
				aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>

			<div class="collapse navbar-collapse " id="a1">
				<ul class="nav  nn ">
					<li class="nav-item   ">
						<a href="index.html" class="nav-link ">发现音乐</a>
					</li>
					<li class="nav-item">
						<a href="dd.html" class="nav-link" >唱片订单</a>
					</li>
					<li class="nav-item">
						<a class="nav-link">关注</a>
					</li>
					<li class="nav-item">
						<a  class="nav-link">商城</a>
					</li>
					<li class="nav-item">
						<a  class="nav-link">音乐人</a>
					</li>
					<li class="nav-item">
						<a class="nav-link">推荐音乐</a>
					</li>
					<li class="nav-item">
						<a  class="nav-link">下载客户端</a>
					</li>
				</ul>
				<form action="#" class="form-inline ml-auto">
					<!-- <span><img src="./images/屏幕截图 2024-06-12 222005.png" alt="" class="fda"></span> -->
					<input type="search" placeholder="音乐/视频/电台/用户"
						class="   bg-white   form-control    rounded-radius  bj" aria-label="Search" />

					
					<span class=" ml-2"><a class="text-white" target="_blank"><img src="./images/s2.jpg" class="loog"><a  href="register.html" class="wl1 text-white pl-1">登录</a></a></span>
				</form>
			</div>
		</div>
	</nav>

	

		<div class="carousel slide carousel-inner">
					<div class="row lb">
						<div class="col-sm-2 y"><img src="./images/微信图片_20240612224848.jpg" class="xuhua "height="450" /></div>
						<div class="col-sm-8 container-sm"><img src="./images/微信图片_20240612224848.jpg" class=" w-100"height="450" /></div>
						<div class="col-sm-2 y"><img src="./images/微信图片_20240612224848.jpg" class="xuhua "height="450" /></div>
					</div>
				
				

					<ol class="carousel-indicators yuan">
						<li  class="active"></li>
						<li ></li>
						<li></li>
						<li ></li>
						<li ></li>
						<li ></li>
					</ol>
					<a class="carousel-control-prev "  onclick="p()" href="#" role="button" >
						<span class="carousel-control-prev-icon p"></span>
					</a>
					<a class="carousel-control-next " onclick="n()" href="#" role="button" >
							<span class="carousel-control-next-icon n"></span>
					</a>
				
			</div>
		</div>
		<marquee class=" wl mt-2 mb-2" ></marquee>
		<div class=" container-sm">
			<div class="row tu">
				<div class="col-sm-7">
					<div class="mt-3">
						<span class=""><a href="#" class="text-body h4 "><img src="./images/屏幕截图 2024-06-12 225929.png"
									height="30" class="float-left" />热门推荐</a></span>
						<span class="float-right"><a href="#" class="text-secondary  float-left h5">更多<img
									src="./images/屏幕截图 2024-06-12 230107.png " height="30" class="mb-2" /></a></span>
					</div>
					<hr class="bg-danger" />
					<div class="row fa">
						<div class="col-sm-6">
							<!--rounded图片边角边圆-->
							<a href="#"><img src="./images/1.jpg" alt="" class="rounded w-100" height="85%" />
								<div class="text-dark mt-2">
									想唱歌就一起唱
								</div>
							</a>
						</div>
						<div class="col-sm-6 ">
							<div class="row">
								<div class="col-sm-6 mb-2 ">
									<a href="#"><img src="./images/2.jpg" alt="" class="rounded w-100" height="68%" />

										<div class="text-dark mt-2 mb-1">你曾经有多认真的喜欢一个人</div>
									</a>
								</div>
								<div class="col-sm-6 mb-2">
									<a href="#"><img src="./images/3.jpg" alt="" class="rounded w-100" height="68%" />
										<div class="text-dark mt-2 mb-1">无前奏丨欧美女声丨三秒爱上</div>
									</a>
								</div>
								<div class="col-sm-6 mt-2">
									<a href="#"><img src="./images/4.jpg" alt="" class="rounded w-100" height="68%" />
										<div class="text-dark mt-2 ">不让你通宵循环的电音不是好电音</div>
									</a>
								</div>
								<div class="col-sm-6 mt-2">
									<a href="#"><img src="./images/5.jpg" alt="" class="rounded w-100" height="68%" />
										<div class="text-dark mt-2">想唱歌就一起唱</div>
									</a>
								</div>
							</div>
						</div>
					</div>

				</div>
				<div class="col-sm-5  ycc">
					<div class="mt-4">
						<span class=""><a href="#" class="text-body h4 "><img src="./images/屏幕截图 2024-06-12 225929.png"
									height="30" class="float-left" />榜单</a></span>
						<span class="float-right"><a href="#" class="text-secondary  float-left h5">更多<img
									src="./images/屏幕截图 2024-06-12 230107.png " height="30" class="mb-2" /></a></span>
					</div>

					

					<button class="accordion"><img src="./images/p1.png" alt="" class="float-left pr-2"> <div >飙升榜<br><br><span >刚刚更新</span></div></button>
						<div class="panel">

						<ol class="col-sm-7   ">
							<li>
								<a class="mb-1 aa" >小宇</a>
							</li>
							<li>
								<a class="mb-1 aa">你满我满</a>
							</li>
							<li>
								<a  class="mb-1 aa">不属于地球上的</a>
							</li>
							
						</ol>
					
					</div>
					
						<button class="accordion"><img src="./images/p2.png" alt="" class="float-left pr-2"> <div >新歌榜<br><br><span >刚刚更新</span></div></button>
						<div class="panel">
						<ol class="col-sm-7">
							<li>
								<a href="#" class="aa">不属于地球上的</a>
							</li>
							<li>
								<a href="#" class="aa">梦寐之地终会有一天抵达</a>
							</li>
							<li>
								<a href="#" class="aa">Up Now</a>
							</li>
						</ol>
					</div>
					<button class="accordion"><img src="./images/p3.png" alt="" class="float-left pr-2"> <div >原创榜<br><br><span >刚刚更新</span></div></button>
						<div class="panel">
						<ol class="col-sm-7 ">
							<li>
								<a href="#" class="aa" >你在，不在 (live)</a>
							</li>
							<li>
								<a href="#"class="aa">蘑菇浓汤</a>
							</li>
							<li>
								<a href="#" class="aa">真空</a>
							</li>
						</ol>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-9">
					<div class="mt-4">
						<span class=""><a href="#" class="text-body h4 ">动态</a></span>
						<span class="ml-2 border rounded1 float-right fb"><a  class="text-dark ">发布动态</a></span>
						<span class="ml-2 border rounded1 float-right"><a  class="text-dark ">发布视频</a></span>
						<hr class="bg-danger" />
						
						  <div class="reply-wrap box">
							<div class="user-face"></div>
							<!-- 装载已发表的评论 -->
							<div class="right">
							  <div class="reply-item">
								<div class="user">
								  <div class="user-face">
									<img src="images/ge1.jpg" alt="" />
								  </div>
								  <div class="user-name">凤凰传奇</div>
								  <p>自由飞翔 </p>
								</div>
								<div class="info">
								  <span>2021-10-16 11:58</span>
								  <span>280</span>
								  <span></span>
								  <span><a class="remove" >删除</a></span>
								</div>
							  </div>
							  <div class="reply-item">
								<div class="user">
								  <div class="user-face">
									<img src="images/ge2.jpg" alt="" />
								  </div>
								  <div class="user-name">林俊杰</div>
								  <p>交换余生  我才终于明白会以什么方式哭过</p>
								</div>
								<div class="info">
								  <span>2021-10-16 11:58</span>
								  <span>324</span>
								  <span></span>
								  <span><a class="remove" >删除</a></span>
								</div>
							  </div>
							  <div class="reply-item">
								<div class="user">
								  <div class="user-face">
									<!-- <img src="images/user-3.jpg" alt="" /> -->
									<img src="images/ge3.jpg" alt="" />
								  </div>
								  <div class="user-name">薛之谦</div>
								  <p>其实！分开后我会笑着说，当朋友问你关于我</p>
								</div>
								<div class="info">
								  <span>2021-10-16 12:09</span>
								  <span>493</span>
								  <span></span>
								  <span><a class="remove" >删除</a></span>
								</div>
							  </div>
							</div>
						  </div>
					</div>
				</div>
				<dialog class="duihua">
					<div class="comment-send box">
						<div class="user-face">
						  <img id="avatar" src="images/0.jpg" alt="" />
						</div>
						<div class="textarea-comtainer">
						  <input type="text" placeholder="请输入昵称" id="name" />
						  <textarea name="" id="txt" placeholder="发一条友善的评论"></textarea>
						  <button class="comment-submit" id="btn">发表<br />评论</button>
						</div>
					  </div>
					</dialog>
				<div class="col-sm-3">
					<div class="row bg-light">
						<a class="col-sm-4"><img src="images/w1.jpg" height="80" class="mt-3 rounded " width="80" /></a>

						<div class="col-sm-8 mt-3 ">
							<span class="mb-2">
						被美术耽误的程序员
					</span>
						</div>
						<div class=" border-right text-center h5 mt-2 ml-5">
							<a>0</a><br /><br />
							<a href="javascript:;" class=""><span>动态</span></a>
						</div>
						<div class=" border-right text-center h5 mt-2 ml-3">
							<a>15</a><br /><br />
							<span>关注</span>
						</div>

						<div class=" border-right text-center mt-2 ml-3 h5">
							<a>0</a><br /><br />
							<a href="javascript:;">粉丝</a>
						</div>

						<img src="images/w6.png" class="w-100" />

					</div>

				</div>
			</div>
			
			  <div id="new"></div>
			</div>
			<nav class="navbar navbar-expand  navbar-dark text-dark container">
				<h2 class="mr-5">热门歌手</h2>
				<ul class="nav mt-2 mb-2 b">
					<li class="nav-item  l">
						<a class="nav-link " >音乐人</a>
					</li>
					<li class="nav-item  l">
						<a class="nav-link " >关注</a>
					</li>
					<li class="nav-item l">
						<a class="nav-link " >歌手</a>
					</li>

				</ul>
			</nav>
			
			<div class="tab-content  ">
				<div class="  fa xuan" >
					<ul class="nav jiaocha justify-content-center row">
						<li class="nav-item ">
							<a href="" class="nav-link">
								<span><img src="images/ge1.jpg" class="loog1 w-100" /></span>
								<span>凤凰传奇</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="" class="nav-link">

								<span><img src="images/ge2.jpg" class="loog1 w-100" /></span>
								<span>林俊杰</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="" class="nav-link">
								<span><img src="images/ge3.jpg" class="loog1 w-100" /></span>
								<span>薛之谦</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="" class="nav-link">

								<span><img src="images/ge4.jpg" class="loog1 w-100" /></span>
								<span>汪苏泷</span>
							</a>
						</li>
						<li class="nav-item y">
							<a href="" class="nav-link">
								<span><img src="images/ge5.jpg" class="loog1 w-100 " /></span>
								<span>周杰伦</span>
							</a>
						</li>
					</ul>

				</div>
				<div class=" fa xuan">
					<ul class="nav jiaocha justify-content-center row">
						<li class="nav-item">
							<a href="" class="nav-link">
								<span><img src="images/ge3.jpg" class="loog1 w-100" /></span>
								<span>薛之谦</span>
							</a>
						</li>
						<li class="nav-item ">
							<a href="" class="nav-link">
								<span><img src="images/ge1.jpg" class="loog1 w-100" /></span>
								<span>凤凰传奇</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="" class="nav-link">

								<span><img src="images/ge2.jpg" class="loog1 w-100" /></span>
								<span>林俊杰</span>
							</a>
						</li>

						<li class="nav-item">
							<a href="" class="nav-link">

								<span><img src="images/ge4.jpg" class="loog1 w-100" /></span>
								<span>汪苏泷</span>
							</a>
						</li>
						<li class="nav-item y">
							<a href="" class="nav-link">
								<span><img src="images/ge5.jpg" class="loog1 w-100 " /></span>
								<span>周杰伦</span>
							</a>
						</li>
					</ul>

				</div>
				<div class="fa xuan">
					<ul class="nav jiaocha justify-content-center row">
						<li class="nav-item y">
							<a href="" class="nav-link">
								<span><img src="images/ge5.jpg" class="loog1 w-100 " /></span>
								<span>周杰伦</span>
							</a>
						</li>
						
						<li class="nav-item ">
							<a href="" class="nav-link">
								<span><img src="images/ge1.jpg" class="loog1 w-100" /></span>
								<span>凤凰传奇</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="" class="nav-link">

								<span><img src="images/ge2.jpg" class="loog1 w-100" /></span>
								<span>林俊杰</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="" class="nav-link">
								<span><img src="images/ge3.jpg" class="loog1 w-100" /></span>
								<span>薛之谦</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="" class="nav-link">

								<span><img src="images/ge4.jpg" class="loog1 w-100" /></span>
								<span>汪苏泷</span>
							</a>
						</li>
						
					</ul>

				</div>
			</div>
		</div>
		
			<div class="con   container">
			
				<ul class="u ">
					<li ><img src="./images/1.jpg" alt=""></li>
					<li ><img src="./images/2.jpg" alt=""></li>
					<li><img src="./images/3.jpg" alt=""></li>
					<li><img src="./images/4.jpg" alt=""></li>
					<li ><img src="./images/5.jpg" alt=""></li>
					<li ><img src="./images/6.jpg" alt=""></li>
				</ul>
			</div>
			<div class="fixed-bottom">
				<div class="co text-center">
					<a class=" ccc">&times;</a>
					<ul>
					</ul>
				  </div>
				  <div id="player "  class="bjj ">
					<audio id="audio" src="./aideo/天后.mp3"></audio>
					
					<div class="container">
					<div class="row pt-2">
					<div class="controls col-2">
						<span class="pr-2"><a id="play1"><img src="./images/lo2.png"  class="lo" alt=""></a></span>
						<span class="pr-2"><a id="play2"><img src="./images/lo1.png"  class="lo" alt=""></a></span>
						<span ><a  id="play3"><img src="./images/lo3.png"  class="lo" alt=""></a></span>
					</div>
					  <!-- <button id="stop">停止</button> -->
						<div class="col-0">
							<img src="./images/3.jpg" alt="" class="rounded " height="40">
								</div>
					   <div class="col-8  text-white ">
					
						<span  class="text-white  pb-1 zi">天后</span><br>
						<input type="range" id="seek-bar" value="0" class="bg-white">
						<span id="current-time">00:00</span>/<span id="duration">00:00</span>
					  <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
					  
					   </div>
					  
					</div>
					</div>
				</div>
			</div>
			
		<footer class="text-center bg-light ">
			<ul class="nav jiaocha1 justify-content-center">
				<li class="nav-item">
					<a href="" class="nav-link">
						<span><img src="images/ll1.png" class="loog2" /></span>
						<span>音乐开放平台</span>
					</a>
				</li>
				<li class="nav-item">
					<a href="" class="nav-link">

						<span><img src="images/ll2.png" class="loog2" /></span>
						<span>云村交易所</span>
					</a>
				</li>
				<li class="nav-item">
					<a href="" class="nav-link">
						<span><img src="images/ll3.png" class="loog2" /></span>
						<span>X StudioAI歌手</span>
					</a>
				</li>
				<li class="nav-item">
					<a href="" class="nav-link">

						<span><img src="images/ll4.png" class="loog2" /></span>
						<span>用户认证</span>
					</a>
				</li>
				<li class="nav-item">
					<a href="" class="nav-link">
						<span><img src="images/ll5.png" class="loog2" /></span>
						<span>音乐交易平台</span>
					</a>
				</li>
				<li class="nav-item">
					<a href="" class="nav-link">
						<span><img src="images/ll6.png" class="loog2" /></span>
						<span>云推歌</span>
					</a>
				</li>
			</ul>
			<span>&copy;Copyright 2024 Administrator. All Rights Reserved</span><br>
			<span>32302140228劳勇林</span>
		</footer>
	
<script  src="./js/index.js">
	

	
</script>
</body>

</html>